import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Button, Input, Select,Pagination } from "antd";
import MyAlert from "src/component/MyAlert";
import action from "../../../store/Actions/index";
import { debounce } from "../../../utils/performance";
import Table from "src/component/table";
import "./index.less";
import { PlusOutlined } from "@ant-design/icons";
function Privilege(props) {
  const { TextArea } = Input;
  const { Option } = Select;
  //选择角色权限
  const [role, setRole] = useState("大学生实训");
  //权限分类
  const [privilege, setPrivilege] = useState([]);
  //弹框标题
  const [title, setTitle] = useState("");
  //添加角色
  const [addRole, setAddRole] = useState(false);
  //角色名称
  const [roleName, setRoleName] = useState("");
  //角色说明
  const [roleExplain, setRoleExplain] = useState("");
  //分配子管理员
  const [childRole, setChildRole] = useState(false);
  //添加子管理员
  const [addChildRole, setAddChildRole] = useState(false);
  //设置行标题
  const [columns, setColumns] = useState([]);
  //收集子管理员信息
  const [childRoleObj,setChildRoleObj] = useState({
    "userRoot":"",
    "name":"",
    "sex":"",
    "state":"",
    "college":"",
    "position":"",
    "phone":"",
    "identity":"",
    "email":"",
    "remark":""
  })
  //生成表格数据
  const [tableList, setTableList] = useState([]);
  //设置当前页码
  const [current, setCurrent] = useState(1);
  //设置页码条数
  const [size, setSize] = useState(5);

  //筛选默认数据
  const ViewList = (data, roleName = "大实训讲师") => {
    let result = data.filter((item) => {
      return item.role.indexOf(roleName) !== -1;
    });
    const privilegeObj = JSON.parse(result[0].privilege);
    setPrivilege(privilegeObj);
  };

  //筛选表格数据
  const  TableLit = (data,option:any={college: "",email: "", identity: "", name: "", phone: "",position: "",remark: "",sex: "",state: "", userRoot: ""}) => {
    console.log(data,option);
    
    let newArr = [];
    //设置开始位置
    let start = (current - 1) * size;
    //设置结束位置
    let end = start + size;
    data.filter((item)=>{
      if(item.college===option.college){
        
      }
    })
    let result = newArr.slice(start,end);
    setTableList(result);
  }

  useEffect(() => {
    const { getRoleList } = props;
    getRoleList();
  }, []);

  useEffect(() => {
    const { roleList } = props;
    ViewList(roleList);
  }, []);

  useEffect(() => {
    const { employee } = props;
    TableLit(employee,childRoleObj);
  }, [props.roleList, size, current]);
  useEffect(() => {
    let columns = [
      {
        title: "账号",
        dataIndex: "userRoot",
        key: "userRoot",
        width: "150px",
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        width: "150px",
      },
      {
        title: "所属部门",
        dataIndex: "college",
        key: "college",
        width: "150px",
      },
      {
        title: "电子邮箱",
        dataIndex: "email",
        key: "email",
        width: "150px",
      },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        width: "150px",
      },
      {
        title: "状态",
        dataIndex: "state",
        key: "state",
        width: "150px",
      }
    ];
    setColumns(columns);
  }, []);

  const okAddRole = () => {
    console.log(roleName, roleExplain, privilege);
    const { addRoleList } = props;
    addRoleList({
      role: roleName,
      explain: roleExplain,
      child_admin: [],
      privilege: privilege,
    });
    setAddRole(false);
  };

  //选择角色
  const RoleOption = (role) => {
    const { roleList } = props;
    ViewList(roleList, role);
  };
  //分配子管理员
  const okChildRole = () => {
    setChildRole(false);
  };
  //添加子管理员
  const okAddChildRole = () => {
    setAddChildRole(false);
  };
  const searchChildRole = () => {
    const { employee } = props;
    TableLit(employee,childRoleObj);
    console.log(childRoleObj);
    
  }
  return (
    <div className="Privilege">
      <div className="header">
        <h3>角色设置</h3>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setTitle("添加角色");
            setAddRole(true);
          }}
        >
          添加角色
        </Button>
      </div>
      <div className="main">
        <div className="nav">
          <h3>全部角色({props.roleList.length} / 100)</h3>
          <ul>
            {props.roleList &&
              props.roleList.map((item) => {
                return (
                  <li
                    key={item.id}
                    onClick={() => {
                      RoleOption(item.role);
                    }}
                  >
                    {item.role}
                  </li>
                );
              })}
          </ul>
        </div>
        <div className="content">
          <div className="title">
            <div className="left">
              <p>{role}</p>
              <p>
                <span>{props.version.company_name}</span>
                <span>2022-03-21 23:13:18</span>
              </p>
            </div>
            <div className="right">
              <p>编辑角色信息</p>
              <p>删除角色</p>
            </div>
          </div>
          <div className="admin">
            <h3>已配置的子管理员</h3>
            <p
              onClick={() => {
                setTitle("分配子管理员");
                setChildRole(true);
              }}
            >
              分配子管理员
            </p>
          </div>
          <div className="privilege">
            <div className="head">
              <h3>已配置的权限</h3>
              <p>编辑角色权限</p>
            </div>
            {privilege &&
              privilege.map((item, index) => {
                return (
                  <div className="type" key={index}>
                    <p>{item.name}</p>
                    {item.type.map((ite, i) => {
                      return (
                        <div className="exam" key={i}>
                          <p>{ite.name}</p>
                          <ul>
                            {ite.option.map((it, k) => {
                              return <li key={k}>{it.name}</li>;
                            })}
                          </ul>
                        </div>
                      );
                    })}
                  </div>
                );
              })}
          </div>
        </div>
      </div>
      <MyAlert
        isModalVisible={addRole}
        handleOk={okAddRole}
        handleCancel={() => {
          setAddRole(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="add">
          <ul>
            <li>
              <span>角色名称</span>
              <Input
                showCount
                maxLength={10}
                placeholder="请输入角色名称"
                onChange={(e) => {
                  debounce(setRoleName(e.target.value), 1000);
                }}
              />
            </li>
            <li>
              <span>角色说明</span>
              <TextArea
                showCount
                maxLength={200}
                placeholder="请输入角色说明"
                onChange={(e) => {
                  debounce(setRoleExplain(e.target.value), 1000);
                }}
              />
            </li>
          </ul>
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={childRole}
        handleOk={okChildRole}
        handleCancel={() => {
          setChildRole(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="setting">
          <h3>
            <span>已经分配的子管理员</span>
            <span
              onClick={() => {
                setTitle("指定特定学员");
                setAddChildRole(true);
              }}
            >
              添加子管理员
            </span>
          </h3>
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={addChildRole}
        handleOk={okAddChildRole}
        handleCancel={() => {
          setAddChildRole(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div id="addChildRole">
          <div className="role_info">
            <ul>
              <li>
                <span>账号 :</span>
                <Input placeholder="请输入账号" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    userRoot:e.target.value
                  });
                }} />
              </li>
              <li>
                <span>姓名 :</span>
                <Input placeholder="请输入姓名" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    name:e.target.value
                  })
                }} />
              </li>
              <li>
                <span>性别 :</span>
                <Select
                  placeholder="请选择性别"
                  style={{ width: "60%" }}
                  onChange={(value) => {
                    setChildRoleObj({
                      ...childRoleObj,
                      sex:value
                    })
                  }}
                >
                  <Option value="男">男</Option>
                  <Option value="女">女</Option>
                </Select>
              </li>
              <li>
                <span>状态 :</span>
                <Select
                  placeholder="请选择状态"
                  style={{ width: "60%" }}
                  onChange={(value) => {
                    setChildRoleObj({
                      ...childRoleObj,
                      state:value
                    })
                  }}
                >
                  <Option value="在职">在职</Option>
                  <Option value="休假">休假</Option>
                  <Option value="离职">离职</Option>
                </Select>
              </li>
              <li>
                <span>部门 :</span>
                <Select
                  placeholder="请选择部门"
                  style={{ width: "60%" }}
                  onChange={(value) => {
                    setChildRoleObj({
                      ...childRoleObj,
                      college:value
                    })
                  }}
                >
                  <Option value="网站工程学院">网站工程学院</Option>
                  <Option value="传媒学院">传媒学院</Option>
                  <Option value="人工智能学院">人工智能学院</Option>
                  <Option value="计算机科学与技术学院">计算机科学与技术学院</Option>
                </Select>
              </li>
              <li>
                <span>职位 :</span>
                <Input placeholder="请输入职位" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    position:e.target.value
                  })
                }} />
              </li>
              <li>
                <span>手机号 :</span>
                <Input placeholder="请输入手机号" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    phone:e.target.value
                  })
                }} />
              </li>
              <li>
                <span>证件号 :</span>
                <Input placeholder="请输入证件号" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    identity:e.target.value
                  })
                }} />
              </li>
              <li>
                <span>邮箱 :</span>
                <Input placeholder="请输入邮箱" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    email:e.target.value
                  })
                }} />
              </li>
              <li>
                <span>备注 :</span>
                <Input placeholder="请输入备注" onBlur={(e) => {
                  setChildRoleObj({
                    ...childRoleObj,
                    remark:e.target.value
                  })
                }} />
              </li>
            </ul>
            <div className="btn">
              <Button type="primary" onClick={() => {}}>
                重置
              </Button>
              <Button type="primary" onClick={searchChildRole}>
                搜索
              </Button>
            </div>
          </div>
          <div className="roleList">
            <Table
              studentData={tableList}
              columns={columns}
              style={{ height: 200 }}
            ></Table>
          </div>
          <div className="pagination">
          <Pagination
              showQuickJumper
              defaultCurrent={1}
              defaultPageSize={10}
              // showSizeChanger={props.employee.length > 10 ? true : false}
              pageSizeOptions={["10", "15", "20"]}
              total={500}
              // onChange={changeCurrent}
              // onShowSizeChange={ShowSize}
            />
          </div>
        </div>
      </MyAlert>
    </div>
  );
}
const mapStateToProps = (state) => {
  return state.administratorReducer;
};
export default connect(mapStateToProps, action.administratorActions)(Privilege);
